pharmacy<template>
  <div class="people">
    <!-- 搜索框 -->

    <form action="/">
      <van-search show-action label="返回" placeholder="搜医生" @click-left-icon="handBack">
        <template #label>
          <div @click="handBack">返回</div>
        </template>
      </van-search>
    </form>
    <van-list finished-text="没有更多了" class="content">
      <van-card
        :desc="value.adress"
        class="content"
        v-for="value in userArr"
        :key="value.name"
        @click="toPersonal"
      >
        <template #thumb>
          <img :src="value.url" class="photo" />
        </template>
        <template #title>
          <div class="name">
            <div>{{ value.name }}<span>&emsp;主治医师</span></div>
            <div>
              {{ value.adept }}
            </div>
          </div>
        </template>
        <template #tags>
          <van-tag plain type="primary" class="start">
            <span class="iconfont icon-ai64">5</span>
          </van-tag>
          <van-tag plain type="primary">
            <span>消化内科</span>
          </van-tag>
        </template>
        <template #footer>
          <van-button size="mini" @click="handClick"
            >图文￥30
            <van-popup position="bottom" :style="{ height: '30%' }" />
          </van-button>

          <van-button size="mini">电话￥150</van-button>
        </template>
      </van-card>
    </van-list>
  </div>
</template>

<script lang='ts' setup>
import { showConfirmDialog } from "vant";
import { ref,onMounted,onBeforeMount} from "vue";
import { useRouter } from "vue-router";
import { userhandle } from "../../api/userDoctor";
const router = useRouter();

let userArr = ref("");
const handBack = () => {
  history.back();
};
// 加载分类数据
onBeforeMount(() => {
  const result: any = userhandle().then((res) => {
    userArr.value = res.list;
  });
});

const toPersonal=()=>{
  router.push("./personal")
}

const handClick = () => {
  showConfirmDialog({
    width: "300px",
    title: "电话号码",
    message: "是否拨打?",
    messageAlign:"right",
    theme:"round-button",
    overlayStyle:{
    height:"1300px",
    }
  })
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
};
</script>

 <style lang='less' scoped>
.content {
  .photo {
    font-size: 14px;
    margin-top: 25px;
  }
  .name {
    margin-top: 10px;
    :first-child {
      font-size: 16px;
      font-weight: 600;
      span {
        font-size: 14px;
        font-weight: 300;
      }
    }
    :nth-child(2) {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 15px;
      color: #6f7371;
      margin: 6px 0px;
    }
    .start {
      .iconfont {
        font-size: 10px;
      }
    }
  }
}
</style>
